در دنیای امروز، طراحی وب‌سایت به یکی از عوامل کلیدی برای موفقیت کسب‌وکارها تبدیل شده است. ابزارهای مختلفی برای طراحی-ui و ایجاد تجربیات کاربری بی‌نظیر وجود دارد، اما یکی از نام‌های شناخته‌شده و محبوب، نرم‌افزار فیگما (Figma) است. این ابزار تحت وب به طراحان اجازه می‌دهد تا به صورت همزمان با یکدیگر همکاری کنند و طراحی‌های خود را به سرعت و باکیفیت بالا ارائه دهند. فیگما به خاطر قابلیت‌های منحصربه‌فرد خود، به یکی از ابزارهای اصلی در آموزش و اجرای پروژه‌های طراحی سایت، از جمله طراحی سایت ارزان مشهد، تبدیل شده است. در این مقاله به بررسی ویژگی‌ها و قابلیت‌های فیگما می‌پردازیم و به این سوال پاسخ می‌دهیم که چرا این نرم‌افزار به یکی از محبوب‌ترین ابزارها در صنعت طراحی تبدیل شده است.

فیگما چیست؟

همان‌طور که در مقدمه اشاره شد، فیگما یک نرم‌افزار مخصوص طراحی UI و UX است. به‌طور کلی، این برنامه یک ابزار رایگان و مبتنی بر ابر است که قابلیت نصب بر روی سیستم‌عامل‌های ویندوز و مک را دارد و همچنین می‌توان از آن به‌صورت آنلاین در مرورگر استفاده کرد. یکی از ویژگی‌های قابل توجه این نرم‌افزار، امکان تشکیل تیم‌های چندمنظوره طراحی است که به لطف فضای ابری آن فراهم شده است.

تشکیل تیم‌های طراحی به‌عنوان یکی از مزایای اصلی فیگما، می‌تواند به صرفه‌جویی در زمان و هزینه‌ها کمک کند و تجربه طراحی را جذاب‌تر و لذت‌بخش‌تر کند. این نرم‌افزار همچنین قابلیت کامنت‌گذاری برای اعضای تیم را ارائه می‌دهد و از طریق آن می‌توان به پروفایل همکاران دسترسی پیدا کرده و صفحه نمایش آن‌ها را مشاهده کرد.

قابلیت Version Control یا مدیریت نسخه، یکی دیگر از مزایای فیگما به شمار می‌رود. با استفاده از این ویژگی، می‌توان در هر مرحله از طراحی به مراحل قبلی بازگشت و تغییرات لازم را اعمال کرد.

ساخت اجزا یا Components نیز یکی دیگر از قابلیت‌های مهم فیگما است. با این امکان، می‌توانید اجزای مختلفی را ایجاد و ترکیب کرده و آن‌ها را ذخیره نمایید تا در زمان نیاز به‌راحتی از آن‌ها استفاده کنید.

متدهای استفاده از فیگما

برای استفاده از نرم‌افزار فیگما، می‌توانید از دو روش استفاده کنید: نصب نرم‌افزار یا استفاده از نسخه تحت وب. برای نصب نرم‌افزار، باید به سایت فیگما مراجعه کرده و با استفاده از فیلترشکن، نسخه مربوط به ویندوز یا مک را دانلود نمایید و مراحل نصب را طی کنید. نسخه تحت وب این نرم‌افزار نیز از طریق وبسایت فیگما و با استفاده از سرویس‌های تغییر آی‌پی قابل دسترسی است.

معرفی بخش‌ها و ابزارهای فیگما

وقتی نرم‌افزار را باز می‌کنید، صفحه اولیه شامل چند بخش اصلی است. در قسمت بالا، نوار ابزاری وجود دارد که شامل گزینه‌های مربوط به منو، Tools، Frame، Pen، Pencil و متن می‌باشد. در گوشه بالا سمت راست تصویر، پروفایل خود را مشاهده می‌کنید و در صورت داشتن تیم، می‌توانید پروفایل همکاران را نیز ببینید. گزینه Share در کنار پروفایل به شما این امکان را می‌دهد که پروژه‌ها را به اشتراک بگذارید و آیکونی که در کنار آن قرار دارد، مربوط به نمایش پروژه‌هایی است که ایجاد کرده‌اید.

ستون سمت راست صفحه به تنظیمات و ویژگی‌های اشکالی که رسم می‌کنید اختصاص دارد، در حالی که ستون سمت چپ به فریم‌ها و لایه‌‎ها مربوط است.

برای شروع طراحی در پروژه‌های ایجاد شده، ابتدا باید یک آرت‌بورد یا فریم جدید ایجاد کنید. با استفاده از گزینه مربوط به فریم در نوار ابزار بالا، می‌توانید آرت‌بوردی به اندازه صفحه نمایش موبایل، تبلت و سایر دستگاه‌ها ایجاد کرده و پس از تایید نوع فریم، آن را نام‌گذاری کنید.

ابزارها (Tools) در منوی بالا

ابزارها به شما این امکان را می‌دهند تا اشکالی را در داخل فریم‌ها ایجاد کنید. ابزارهای موجود در این قسمت شامل چهارضلعی، خط، فلش، دایره، چندضلعی، ستاره و عکس هستند. تنظیمات و تغییرات مرتبط با ویژگی‌های این ابزارها در ستون سمت راست قرار دارد. با استفاده از این تنظیمات، می‌توانید موقعیت، اندازه، میزان تیزی گوشه‌ها و برخی خصوصیات دیگر را تغییر دهید. باید توجه داشت که مقادیر موجود در تنظیمات این ستون با نمادهای ریاضی هماهنگ هستند و می‌توانید با استفاده از چهار عمل اصلی ریاضی آن‌ها را تغییر دهید.

برخی از خصوصیاتی که در ستون طراحی (Design) قابل تغییر هستند شامل گرد کردن گوشه‌ها در چهارضلعی با استفاده از "corner radius"، بریدن قسمتی از دایره با استفاده از "Arc"، ایجاد دورخط (stroke)، اصلاح میزان شفافیت و تغییرات زاویه‌ای می‌شود.

نکته قابل ذکر این است که وقتی اشکال را در داخل فریم رسم می‌کنید، با نگه داشتن کلید Shift می‌توانید شکل‌هایی با اضلاع یکسان رسم کنید و این مورد همچنین در هنگام چرخاندن و تغییر زوایا نیز صدق می‌کند.

کاربرد لایه‌ها در برنامه فیگما

ستون مربوط به لایه‌ها در سمت چپ برنامه قرار دارد. در این قسمت، ابتدا نام فریم را مشاهده می‌کنید و در زیر آن لایه‌ها به ترتیب از جدیدترین تا قدیمی‌ترین نمایش داده می‌شوند. با انتخاب یک لایه، شکل مربوط به آن نیز در داخل فریم فعال می‌شود. ترتیب لایه‌ها را می‌توانید با کلیک و درگ کردن یا با استفاده از کلیدهای میانبر تغییر دهید. همچنین، با نگه داشتن کلید Shift، می‌توانید چند لایه را به‌طور همزمان انتخاب کنید.

انجام عملیات بولین در فیگما

اشکالی که در داخل فریم‌ها رسم می‌شوند و با یکدیگر در تماس هستند یا نقطه اشتراک دارند، می‌توانند با استفاده از گزینه بولین در بالای فریم تغییر یابند. گزینه‌های موجود در منوی بولین شامل ترکیب کردن (Union Selection)، تفریق کردن (Subtract)، اشتراک گرفتن (Intersect) و حذف نقطه اشتراک (Exclude) می‌باشد. با استفاده از عملیاتی که با بولین انجام می‌شود، می‌توانید اشکال خلاقانه‌تری را خلق کنید.

ابزارهای Pen، Pencil و Blend در منوی بالا

کاربری ابزار Pen برای افرادی که با نرم‌افزارهای گرافیکی آشنا هستند، کاملاً مشخص است. با استفاده از این ابزار، می‌توان گره و خط ایجاد کرد. با کلیک و درگ کردن، خط رسم شده به یک منحنی تبدیل می‌شود. اگر نقطه ابتدایی به نقطه انتهایی متصل شود، یک شکل هندسی یا منحنی ایجاد می‌شود که می‌توانید تغییرات لازم را از منوی طراحی (Design) در سمت راست اعمال کنید.

ابزار Pencil نیز به شما امکان می‌دهد تا با کلیک و درگ کردن، شکل‌هایی با گره‌های زیاد و حالت نرم رسم کنید. در نهایت، با استفاده از ابزار Blend می‌توانید تغییرات مربوط به دستگیره‌های گره‌ها را انجام دهید.

کاربرد ابزار متن در برنامه طراحی فیگما

به‌طور کلی، ابزار متن (Text) یکی از وجوه اصلی کار با نرم‌افزار فیگما است و به شما این امکان را می‌دهد که متن را به راحتی وارد کنید. با انتخاب ابزار متن و کلیک کردن در داخل فریم، پنل خصوصیات و ویژگی‌ها در ستون سمت راست ظاهر می‌شود. در این پنل می‌توانید گزینه‌هایی مانند نوع فونت، اندازه فونت، فاصله بین خطوط و سایر تنظیمات را مشاهده و تغییر دهید.

بدیهی است که این ابزار برای طراحی منوها و بخش‌های مختلف وب‌سایت یا اپلیکیشن‌های موبایل بسیار حیاتی است. با این حال، لازم به ذکر است که در نسخه تحت وب نرم‌افزار فیگما، امکان استفاده از متون فارسی وجود ندارد.

نتیجه‌گیری

در این مقاله سعی کردیم به‌طور مختصر برنامه طراحی رابط کاربری فیگما را معرفی کنیم و بخش‌های مختلف و نحوه استفاده از آن را تا حد امکان تشریح نماییم. باید در نظر داشت که فیگما یکی از بهترین برنامه‌ها در زمینه طراحی رابط کاربری است و به دلیل ویژگی‌های منحصر به فرد خود، در مدت اخیر بسیاری از طراحان به این نرم‌افزار مهاجرت کرده‌اند و از برنامه‌هایی نظیر Adobe XD فاصله گرفته‌اند.